/*!
 * ImageRotatorManager - manages the behavior of jquery cycle and carousel
 * components to create the image rotator that will be used on the Weld County
 * Homepage.  
 *
 * Author: Kyle Traff
 *
 * Built on top of the following jQuery libraries (be sure to include these scripts
 * in the html page before including this script
 *   jQuery-1.4.2: http://jquery.com
 *	 Cycle: http://jquery.malsup.com/cycle/
 *	 jCarousel: http://sorgalla.com/projects/jcarousel/
 *
 * Date: Wed July 20, 2011
 */

/* Creates the image rotator */
function ImageRotatorManager () {
	ImageRotatorManager.scrolling = true;
	ImageRotatorManager.hovering = false; //set to true when a user is hovering over the carousel to prevent scrolling
	ImageRotatorManager.carousel;
	this.start(null);
}

/* Begins loading the image rotator */
ImageRotatorManager.prototype.start = function (callback) {
	this.loadXML(callback);
	//register slideshow buttons to perform the corresponding actions
	jQuery('#pause').click(this.pause); 
	jQuery('#play').click(this.resume);
	jQuery('#restart').click(this.restart);
};

/* Loads configuration settings for the image rotator 
*
*  @callback an optional function to be called once the xml
* 	configuration is loaded
*/
ImageRotatorManager.prototype.loadXML = function (callback) {
	var self = this;
	jQuery.get("assets/image-rotator.xml", {}, function (xml) {
			self.parseXML(xml, callback);											 
	});
};

/* Inserts html image tags based on xml configuration data 
*  @xml an xml object containing the image data
*  @callback an optional callback function to be called upon completion
*/
ImageRotatorManager.prototype.parseXML = function (xml, callback) {
	//find every image and add the image to the '#slideshow' div
	jQuery("image", xml).each(function (i) {
		//jQuery("#output").append(jQuery(this).find("name").text() + "<br />");
		jQuery('#slideshow').append('<img id="' + jQuery(this).find("id").text() + '" ' +
										  'src="' + jQuery(this).find("src").text() + '" ' +
										  'name="' + jQuery(this).find("name").text() + '" ' +
										  'alt="' + jQuery(this).find("alt").text() + '" ' +
										  'width="' + jQuery(this).find("width").text() + '" ' +
										  'height="' + jQuery(this).find("height").text() + '" />');
	});
	if(callback != null) {
		callback();
	}
	else {
		this.loadCycle();
	}
};

/* Loads the jQuery slideshow (using the jQuery Cycle plugin) */
ImageRotatorManager.prototype.loadCycle = function () {
	var self = this;
	//Load the cycling slideshow
	jQuery('#slideshow').cycle({ 
		//all slideshow options are configured here, see http://jquery.malsup.com/cycle/ for more info
		fx:      'fade',
		prev:   '#prev-btn', 
		next:	'#next-btn',
		speed:    1000, 
		timeout: 10000,
		pager: '#carousel_ul',
		// callback fn that creates a thumbnail to use as pager anchor 
		pagerAnchorBuilder: function(idx, slide) { 
			return '<li><a href="#"><img src="' + slide.src + '" width="100" height="72" /></a></li>'; 
		}, 
		before:     function() {
			//animate the description box to hide before slide transition
			jQuery('#description_box').animate({
				height: 'toggle',
				opacity: 0
			}, 500, function(){
				//Animation complete
			});
		},
		after:     function(curr, next, opts) {
			jQuery('#caption').html(this.alt);
			jQuery('#imageTitle').html(this.name);
			//animate the description box to display after slide transition
			jQuery('#description_box').animate({
				height: 'toggle',
				opacity: .6
			}, 500, function() {
				//Animation complete
			});
			//Scroll the carousel to the next slide, if needed
			self.scroll(opts.currSlide, opts.nextSlide, opts.slideCount, true);
		}
	});	
	//now that the pager for slideshow is built, load the Carousel
	this.loadCarousel();
}

ImageRotatorManager.prototype.loadCarousel = function () {
	var self = this;
	//Load the carousel below the slideshow
	jQuery('#carousel_ul').jcarousel({
		scroll: 7,
		visible: 7,
		wrap: 'both',
		//callback function once initialization is completed
		initCallback: self.carouselInitCallbackFunction,
		//callback function for each time the slideshow is scrolled
		itemLoadCallback: self.itemLoadCallbackFunction
	});	
};


/* Called once the jCarousel is loaded */
ImageRotatorManager.prototype.carouselInitCallbackFunction = function (carousel, state) {
	ImageRotatorManager.carousel = carousel;
	
	 // Disable autoscrolling if the user clicks the prev or next button
    ImageRotatorManager.carousel.buttonNext.bind('click', function() {
        ImageRotatorManager.scrolling = false;
    });
 
    ImageRotatorManager.carousel.buttonPrev.bind('click', function() {
        ImageRotatorManager.scrolling = false;
    });
 
    // Pause autoscrolling if the user moves with the cursor over the clip
    ImageRotatorManager.carousel.clip.hover(function() {
        ImageRotatorManager.hovering = true;
		ImageRotatorManager.scrolling = false;
    }, function() {
        ImageRotatorManager.hovering = false;
		ImageRotatorManager.scrolling = true;
    });
};

/* Called after each time the jCarousel is scrolled, for instance */
ImageRotatorManager.prototype.itemLoadCallbackFunction = function (carousel, state) {
	if (ImageRotatorManager.carousel) {
		//ImageRotatorManager.carousel = carousel;
	}
};

/* Sets the Carousel's scroll position to the first slide */
ImageRotatorManager.prototype.restart = function () { 
	if (ImageRotatorManager.carousel) {
		ImageRotatorManager.carousel.scroll(0, true);
	}
}

/* Pauses the slideshow */
ImageRotatorManager.prototype.pause = function () { 
	jQuery('#slideshow').cycle('pause'); 
	return false; 
}

/* Pauses the slideshow */
ImageRotatorManager.prototype.resume = function () { 
	jQuery('#slideshow').cycle('resume', true); 
}

/* Scrolls the carousel to the desired position */
ImageRotatorManager.prototype.scroll = function (curPosition, nextPosition, slideCount, bool) { 
	if (ImageRotatorManager.carousel && ImageRotatorManager.scrolling == true ) {
		//Delay scrolling once for each succession of 7 slides
		if(nextPosition % 7 == 1) {
			ImageRotatorManager.carousel.scroll(nextPosition, bool);
		}
	}
	else { //reset scrolling to true for the next go around
		if(!ImageRotatorManager.hovering) {
			ImageRotatorManager.scrolling = true;
		}
	}
}

/* Scrolls the carousel to the next position */
ImageRotatorManager.prototype.next = function () { 
	if (ImageRotatorManager.carousel) {
		ImageRotatorManager.carousel.next();
	}
}